<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-checkcard ant-pro-checkcard-bordered"
    >
      <div
        class="ant-pro-checkcard-cover"
      >
        <img
          alt="example"
          height="240"
          src="https://gw.alipayobjects.com/mdn/rms_66ee3f/afts/img/A*FyH5TY53zSwAAAAAAAAAAABkARQnAQ"
        />
      </div>
    </div>
    <div
      class="ant-pro-checkcard ant-pro-checkcard-bordered"
    >
      <div
        class="ant-pro-checkcard-cover"
      >
        <img
          alt="checkcard"
          src="https://gw.alipayobjects.com/mdn/rms_66ee3f/afts/img/A*FyH5TY53zSwAAAAAAAAAAABkARQnAQ"
        />
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard Cover Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            cover
          </strong>
          : 卡片封面，可以是图片 URL 字符串或 React 节点
        </li>
      </ul>
      <h4>
        Cover 使用方式：
      </h4>
      <ul>
        <li>
          <strong>
            字符串
          </strong>
          : 直接传入图片 URL，会自动渲染为 img 标签
        </li>
        <li>
          <strong>
            组件
          </strong>
          : 传入 img 标签或其他 React 节点，可以自定义样式和属性
        </li>
      </ul>
      <h4>
        Img 标签 Props：
      </h4>
      <ul>
        <li>
          <strong>
            alt
          </strong>
          : 图片的替代文本，用于无障碍访问
        </li>
        <li>
          <strong>
            height
          </strong>
          : 图片高度，可以是数字或字符串
        </li>
        <li>
          <strong>
            src
          </strong>
          : 图片源地址
        </li>
        <li>
          <strong>
            width
          </strong>
          : 图片宽度，可以是数字或字符串
        </li>
        <li>
          <strong>
            style
          </strong>
          : 图片样式对象
        </li>
      </ul>
      <h4>
        Cover 特点：
      </h4>
      <ul>
        <li>
          <strong>
            自动适配
          </strong>
          : 字符串形式的 cover 会自动适配卡片宽度
        </li>
        <li>
          <strong>
            自定义样式
          </strong>
          : 组件形式可以完全控制图片的样式和属性
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 支持响应式布局，图片会随卡片大小调整
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>